<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Adding an exercise to ${routine.name }</title>


<script>
function loadVariations()
	{
	document.getElementById("variationList").innerHTML = "Loading...";
	
	var edit = '<a href="';
	edit += '${pageContext.request.contextPath}/exercise/info?id=';
	 edit += entryForm.exer.options[entryForm.exer.selectedIndex].value;
	 edit += '">Edit Exercise</a>';

	document.getElementById("editExercise").innerHTML = edit;
		if (window.XMLHttpRequest)
		  {// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		  }
		else
		  {// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		  }
		xmlhttp.onreadystatechange=function()
		  {
		  if (xmlhttp.readyState==4 && xmlhttp.status==200)
		    {
		    var html = ""; //
		    //html = "<p><p>";
		    var xmlDoc = xmlhttp.responseXML;
		    var x = xmlDoc.getElementsByTagName("entry");
		    for(i=0; i< x.length; i++)
		    {
		    	html += "<input type='checkbox' name='variation' value= '" + x[i].getElementsByTagName("id")[0].childNodes[0].nodeValue + 
		    	"'/>"; 
		    	html += x[i].getElementsByTagName("string")[0].childNodes[0].nodeValue;
		    }
		    
		    document.getElementById("variationList").innerHTML = html;
		    }
		  }
		  
		var box = document.getElementById("exer");
		var value = entryForm.exer.options[entryForm.exer.selectedIndex].value;
		var params = "exerciseid=" + value;
		xmlhttp.open("GET","${pageContext.request.contextPath}/routine/addentryajax?exerciseid=" + value,true);
		xmlhttp.send();
	}
	
	function clearVariations(){
		document.getElementById("variationList").innerHTML = "";
	}
    var choices = ${exercises};
    function ddchange(dd1) {
    	clearVariations();
        // Fill dd2 options based on selected dd1 value.
        var selected = dd1.options[dd1.selectedIndex].text;
        var box = document.getElementById("dd2");
        var box2 = document.getElementById("dd3");
        var create = 	'<a href="'
        create +=		"<c:url value='/exercise/create' />"
        create +=		'">Create Exercise</a>';
		
		if(selected == "---")
			document.getElementById("createExercise").innerHTML = "";
		else
			document.getElementById("createExercise").innerHTML = create;
        
        for(var count = box.options.length - 1; count >= 0; count--)
    	{
        box.options[count] = null;
    	}
    	
    		var option = document.createElement("OPTION");
	        option.text = "---";
	        option.value = -1;
        	box.options.add(option);
        	
        for (var item in choices[selected]){
        
	        var option = document.createElement("OPTION");
	        option.text = item;
	        option.value = choices[selected][item];
        	box.options.add(option);
        }
       
    }

    
    function validate(form)	{
    
    var box = document.getElementById("dd2");
    if(box.options.selectedIndex == 0)
    	alert("I don't think so, Tim");
    else
		form.submit();

	}
	
	
</script>
</head>
<body>
<jsp:include page="/includes/nav.jsp" />
<form action="addentry/submit?id=${routine.id }" name="entryForm" method="post">
<table>
	<tr>
		<td>Choose a muscle group</td>
		<td><select name="dd1" onKeyUp="ddchange(this)" onchange="ddchange(this)">
			<option>---</option>
			<c:forEach items="${groupsarray}" var="option">
				<option value="${option.value}">${option.value}</option>
			</c:forEach>
		</select></td>
	</tr>
	<tr>
		<td>Select an exercise</td>
		<td><select name="exer" id="dd2" onKeyUp="loadVariations()"
			onchange="loadVariations()">
		</select></td>
		<td><div id="createExercise"></div></td>
	</tr>
	<tr>
		<td>Select a variation</td>
		<td>
		<div id="variationList"></div>
		</td>
		<td>
		<div id="editExercise"></div>
		</td>

	</tr>
	<tr>
		<td>Select the order placement</td>
		<td><input type="text" name="order" size=3></td>
		<td>Use identical orders to provide alternative exercises</td>
	</tr>
	<tr>
		<td>Suggested Sets:</td>
		<td><input type="text" name="sets" size=3></td>
	</tr>
	<tr>
		<td>Suggested Reps:</td>
		<td><input type="text" name="reps" size=3></td>
		<td>Complicated rep structure? Describe it in the notes below</td>
	</tr>
	<tr>
		<td>Note:</td>
		<td colspan=2><textarea rows="3" cols="25" name="notes">Enter specific rest or rep instructions here</textarea></td>
	</tr>
	<tr>
		<td><input type="button" value="Submit"
			onClick="validate(this.form)"></td>
		<td><input type="hidden" name="id" value="${routine.id }"></td>
	</tr>
</table>
</form>
~~~List of current routine entries goes here to show what you have so
far.
</body>
</html>